<template>
	<div class="page1">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>停车记录</el-breadcrumb-item>
				<el-breadcrumb-item>泊位视频识别分析</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<!--搜索条件区域-->
			<div class="searchWrapper">
				<el-form :inline="true" label-position="right" label-width="70px" :model="formInline" class="demo-form-inline">
					<el-form-item label="区域">
						<el-select v-model.trim="formInline.cityId" filterable placeholder="" @change="getPark()">
							<el-option label="全部" value=""></el-option>
							<el-option :label="area.cityName" :value="area.cityId" :key="area.cityId" v-for="area in areaList"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="车场类型">
						<el-select v-model.trim="formInline.rsType" filterable placeholder="" @change="getPark()">
							<el-option label="全部" value=""></el-option>
							<el-option label="开放" value="0"></el-option>
							<el-option label="封闭" value="1"></el-option>							
							<el-option label="半封闭" value="2"></el-option>
							<el-option label="垂停" value="3"></el-option>
							<el-option label="混合" value="4"></el-option>
							<el-option label="PDA" value="5"></el-option>
						</el-select>
					</el-form-item>					
					<el-form-item label="停车场">
						<el-select v-model.trim="formInline.parkId" filterable placeholder="">
							<el-option label="全部" value=""></el-option>
							<el-option :label="park.parkName" :value="park.parkId" :key="park.parkId" v-for="park in parkList"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商户名称">
						<el-select v-model.trim="formInline.tenantId" filterable placeholder="">
							<el-option label="全部" value=""></el-option>
							<el-option :label="tenant.name" :value="tenant.parkTenantId" :key="tenant.parkTenantId" v-for="tenant in tenantList"></el-option>
						</el-select>
					</el-form-item>					
					<el-button type="primary" icon="search" @click="searchData">查询</el-button>
					<!--<el-button type="success" icon="plus" @click="">添加</el-button>-->				
				</el-form>
			</div>
			<!--列表区域-->
			<div class="tableWrapper">
				<el-table v-loading="loading" :data="tableData" style="width: 100%" height="400">
					<el-table-column type="index" label="序号" width="70"></el-table-column>
					<el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="item in tableCols" :key="item.prop" :formatter="item.formatter"></el-table-column>
					<el-table-column label="操作" width="70">
						<template scope="scope">
							<el-button type="text" @click="showDetail(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页器-->
			<div class="pagerWrapper">
				<div class="block">					
					<el-pagination @size-change="" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getData,
		dateFormat
	} from '../../common/js/public.js'
	export default {
		name: 'hello',
		data () {
			return {
				index: 0,
				total: 0,
				pageSize: 15,
				pageNum: 1,
				loading: false,
				detailFlag: false,
				areaList: [],
				parkList: [],
				tenantList: [],
				tableCols: [{
					prop: 'cityName',
					label: '区域',
					width: '80'
				}, {
					prop: 'rsType',
					label: '车场类型',
					width: '',
					formatter: (row, column) => {
						if (row.rsType == 0) {
							return '开放';
						} else if (row.rsType == 1) {
							return '封闭';
						} else if (row.rsType == 2) {
							return '半封闭';
						} else if (row.rsType == 3) {
							return '垂停';
						} else if (row.rsType == 4) {
							return '混合';
						} else if (row.rsType == 5) {
							return 'PDA';
						}
					}
				}, {
					prop: 'parkName',
					label: '停车场',
					width: ''
				}, {
					prop: 'tenantName',
					label: '商户名称',
					width: ''
				}, {
					prop: 'address',
					label: '地址',
					width: ''
				}, {
					prop: 'showCode',
					label: '系统编码',
					width: ''
				}, {
					prop: 'totalSpace',
					label: '总车位数',
					width: ''
				}],
				tableData: [],
				formInline: {
					cityId: '',
					rsType: '',
					parkId: '',
					tenantId: ''
				}				
			}
		},
		methods: {
			handleCurrentChange (val) {
		       this.pageNum = val;
		       this.searchData();
		    },
			showLog (data) {
				if (data && data.length === 2) {
					let startTime = dateFormat(data[0], 'yyyy-MM-dd HH:mm:ss');
					let endTime = dateFormat(data[1], 'yyyy-MM-dd HH:mm:ss');
					this.formInline.startTime = startTime;
					this.formInline.endTime = endTime;
				}				
			},
			changeDetail (type) {		
				console.log(type)
				if ((this.index === 0 && type === 'pre') || (this.index === 14 && type === 'next')) {
					this.$alert('没有更多数据了', '提示', {
						confirmButtonText: '确定'
					});
				} else {
					type === 'pre' ? this.index -- : this.index ++;						
					let opt = {
						url: '/sym_analysis/api/v1/parking/queryParkRecordDetail',
						data: {
							parkRecordId: this.tableData[this.index].parkRecordId
						},
						success: (res) => {
							this.infoDetail = res.data.ParkRecordVO;
						}
					};
					getData(opt);
				}				
			},
			showDetail (index, obj) {
				this.$router.push({
					path: '/parkDetail',
					query: obj
				})				
			},
			// 获取区域
			getArea () {
				let opt = {
					url: '/gplus/city/queryAreaListByUserAndCity',
					data: {},
					success: (res) => {
						this.areaList = res.data.CityVO;
					}
				};
				getData(opt);
			},
			// 获取停车场
			getPark () {
				this.parkList = [];
				let opt = {
					url: '/gplus/park/queryParkDropDownList',
					data: {
						rsType: this.formInline.rsType,
						cityId: this.formInline.cityId						
					},
					success: (res) => {
						this.parkList = res.data.ParkVO;
						this.formInline.parkId = '';
					}
				};
				getData(opt);
			},
			// 获取商户
			getTenant () {
				let opt = {
					url: '/gplus/bdTenant/getAllTenants',
					data: {},
					success: (res) => {
						this.tenantList = res.data.allTenants;
					}
				};
				getData(opt);
			},
			// 搜索
			searchData () {
				this.tableData = [];
				this.loading = true;
				let opt = {
					url: '/gplus/park/queryAllPark',
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					data: this.formInline,
					success: (res) => {
						this.tableData = res.data.ParkVO;
						this.total = res.total;
						this.loading = false;
					},
					fail: (res) => {						
						this.loading = false;
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			}
		},
		components: {	
		},
		created () {
			this.getArea();
			this.getPark();
			this.getTenant();
		},
		computed: {			
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	.searchWrapper
		overflow: hidden;
		background: #EFF2F7;
		padding: 22px 22px 0;
		margin-bottom: 20px;
	.pagerWrapper
		text-align: right;		
		margin-top: 28px;
		font-size: 12px;
		.export
			font-size: 12px;
			.iconfont
				margin-right: 0;
.detail
	width: 61.4%;
	height: 82.9%;
	position: absolute;
	top: 8.6%;
	left: 20.1%;
	background: #FFFFFF;
	box-shadow: 0 0 4px 1px rgba(128,145,165,0.30);
	border-radius: 3px;	
	z-index: 1000;
	box-sizing: border-box;
	padding: 20px 0;
	.title
		position: absolute;
		background: #3F4A56;
		border-radius: 3px 3px 0 0;
		color: #fff;
		width: 100%;
		top: 0;
		left: 0;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: inherit;
		z-index: 100;
		.el-icon-close
			float: right;
			margin-top: 14px;
	.info
		margin-top: 20px;
		padding: 2.1%;	
		height: 100%;
		overflow: auto;
		box-sizing: inherit;
.mask
	background: rgba(49,53,65,0.60);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
</style>
